<!--  -->
<template>
  <div class="bg">
    <van-nav-bar
      class="navbarSty"
      style="background: #A20B18"
      title="邀请好友"
      left-arrow
      :border="false"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="mainbg">
      <div style="display:flex;justify-content: center;">
        <img class="btnSty" @click="alertshow = true" src="../../assets/img/home/invitedbtn.png" alt />
      </div>
      <div class="listSty">
        <p class="htit">
          <img class="yuan" src="../../assets/img/home/yuan.png" alt />我推荐的会员
          <img class="yuan" src="../../assets/img/home/yuan.png" alt />
        </p>
        <img v-if="false" class="empty" src="../../assets/img/home/empty.png" alt />
        <van-cell-group v-for="item in 10" :key="item">
          <van-cell title="156788899806" value="2020-8-15" />
        </van-cell-group>
      </div>
    </div>
    <!-- 遮罩层 -->
    <van-overlay :show="alertshow">
      <div class="wrapper" @click.stop>
        <div style="margin-top:40px">
        <img class="alertbg" src="../../assets/img/home/alertbg.png" alt="">
        <img class="btn_know"  @click="alertshow = false" src="../../assets/img/home/btn_know.png" alt="">
        </div>

      </div>
    </van-overlay>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    name: "invited"
  },
  data() {
    //这里存放数据
    return {
      value: "",
      list: [],
      loading: false,
      finished: false,
      alertshow:false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    onClickLeft() {
      Toast("返回");
    },
    onClickRight() {
      Toast("按钮");
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
.bg {
  width: 100%;
  /* height: 100%; */
  /* background: #158de9; */
  /* padding-bottom: 20px; */
}
.bg .van-nav-bar {
  box-shadow: 0 0.026667rem 0.053333rem 0 #a20b18;
}
.mainbg {
  width: 100%;
  /* height: 785px; */
  padding-bottom: 20px;
  background: url("../../assets/img/home/invitedbg.png") no-repeat;
  background-size: 100% 100%;
}
.btnSty {
  width: 329px;
  height: 182px;
  margin-top: 170px;
  /* margin: auto; */
  /* display: block; */
}
.listSty {
  width: 355px;
  /* background: #fff; */
  height: 442px;
  overflow-y: scroll;
  margin: auto;
  background: url("../../assets/img/home/listbg.png") no-repeat;
  background-size: 100% 100%;
  padding-bottom: 10px;
}
.htit {
  display: flex;
  height: 60px;

  justify-content: center;
  align-items: center;
  font-size: 20px;
}
.yuan {
  width: 17px;
  height: 17px;
  margin: 0 6px;
}
.empty {
  width: 174px;
  height: 174px;
  display: block;
  margin: auto;
}

.alertbg{
  width: 271px;
  height: 482px;
  display: block;
  margin: auto;
}
.btn_know{
  width: 238px;
  height: 117px;
  display: block;
  margin: auto;
}
</style>